<template>
    <div class="main-content" :style='{"padding":"30px"}'>
        <!-- 列表页 -->
        <template v-if="showFlag">
            <el-form class="center-form-pv" :style='{"margin":"0 0 20px"}' :inline="true" :model="searchForm">
                <el-row :style='{"display":"block"}'>
                    <div :style='{"margin":"0 10px 0 0","display":"inline-block"}'>
                        <label :style='{"margin":"0 10px 0 0","color":"#666","display":"inline-block","lineHeight":"40px","fontSize":"14px","fontWeight":"500","height":"40px"}'
                               class="item-label">商家账号</label>
                        <el-input v-model="searchForm.shangjiazhanghao" placeholder="商家账号"
                                  @keydown.enter.native="search()" clearable></el-input>
                    </div>
                    <div :style='{"margin":"0 10px 0 0","display":"inline-block"}'>
                        <label :style='{"margin":"0 10px 0 0","color":"#666","display":"inline-block","lineHeight":"40px","fontSize":"14px","fontWeight":"500","height":"40px"}'
                               class="item-label">商家地址</label>
                        <el-input v-model="searchForm.shangjiadizhi" placeholder="商家地址"
                                  @keydown.enter.native="search()" clearable></el-input>
                    </div>
                    <el-button class="search" type="success" @click="search()">
                        <span class="icon iconfont icon-xihuan"
                              :style='{"margin":"0 2px","fontSize":"14px","color":"#fff","height":"40px"}'></span>
                        查询
                    </el-button>
                </el-row>

                <el-row class="actions" :style='{"flexWrap":"wrap","margin":"20px 0","display":"flex"}'>
                    <el-button class="add" v-if="isAuth('shangjia','新增')" type="info" @click="addOrUpdateHandler()">
                        <span class="icon iconfont icon-tianjia1"
                              :style='{"margin":"0 2px","fontSize":"14px","color":"#fff","height":"40px"}'></span>
                        添加
                    </el-button>
                    <el-button class="del" v-if="isAuth('shangjia','删除')"
                               :disabled="dataListSelections.length?false:true" type="danger" @click="deleteHandler()">
                        <span class="icon iconfont icon-shanchu9"
                              :style='{"margin":"0 2px","fontSize":"14px","color":"#fff","height":"40px"}'></span>
                        删除
                    </el-button>


                </el-row>
            </el-form>
            <div :style='{"width":"100%","padding":"10px"}'>
                <el-table class="tables"
                          :stripe='false'
                          :style='{"width":"100%","padding":"0","borderColor":"#eee","borderStyle":"solid","borderWidth":"1px 0 0 0","background":"#fff"}'
                          :border='true'
                          v-if="isAuth('shangjia','查看')"
                          :data="dataList"
                          v-loading="dataListLoading"
                          @selection-change="selectionChangeHandler">
                    <el-table-column :resizable='false' type="selection" align="center" width="50"></el-table-column>
                    <el-table-column :resizable='false' :sortable='true' label="序号" type="index" width="50"/>
                    <el-table-column :resizable='false' :sortable='true'
                                     prop="shangjiazhanghao"
                                     label="商家账号">
                        <template slot-scope="scope">
                            {{ scope.row.shangjiazhanghao }}
                        </template>
                    </el-table-column>
                    <el-table-column :resizable='false' :sortable='true'
                                     prop="shangjiamingcheng"
                                     label="商家名称">
                        <template slot-scope="scope">
                            {{ scope.row.shangjiamingcheng }}
                        </template>
                    </el-table-column>
                    <el-table-column :resizable='false' :sortable='true'
                                     prop="shangjiadizhi"
                                     label="商家地址">
                        <template slot-scope="scope">
                            {{ scope.row.shangjiadizhi }}
                        </template>
                    </el-table-column>
                    <el-table-column :resizable='false' :sortable='true'
                                     prop="shangjiadianhua"
                                     label="商家电话">
                        <template slot-scope="scope">
                            {{ scope.row.shangjiadianhua }}
                        </template>
                    </el-table-column>
                    <el-table-column :resizable='false' :sortable='true' prop="shangjiafengmian" width="200"
                                     label="商家封面">
                        <template slot-scope="scope">
                            <div v-if="scope.row.shangjiafengmian">
                                <img v-if="scope.row.shangjiafengmian.substring(0,4)=='http'"
                                     :src="scope.row.shangjiafengmian.split(',')[0]" width="100" height="100"
                                     style="object-fit: cover"
                                     @click="imgPreView(scope.row.shangjiafengmian.split(',')[0])">
                                <img v-else :src="$base.url+scope.row.shangjiafengmian.split(',')[0]" width="100"
                                     height="100" style="object-fit: cover"
                                     @click="imgPreView($base.url+scope.row.shangjiafengmian.split(',')[0])">
                            </div>
                            <div v-else>无图片</div>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable='false' :sortable='true'
                                     prop="shangjiajingying"
                                     label="商家经营">
                        <template slot-scope="scope">
                            {{ scope.row.shangjiajingying }}
                        </template>
                    </el-table-column>
                    <el-table-column width="300" label="操作">
                        <template slot-scope="scope">
                            <el-button class="view" v-if=" isAuth('shangjia','查看')" type="success"
                                       @click="addOrUpdateHandler(scope.row.id,'info')">
                                <span class="icon iconfont "
                                      :style='{"margin":"0 2px","fontSize":"14px","color":"#fff","height":"40px"}'></span>
                                查看
                            </el-button>
                            <el-button class="edit" v-if=" isAuth('shangjia','修改') " type="success"
                                       @click="addOrUpdateHandler(scope.row.id)">
                                <span class="icon iconfont "
                                      :style='{"margin":"0 2px","fontSize":"14px","color":"#fff","height":"40px"}'></span>
                                修改
                            </el-button>

                            <el-button class="btn8" v-if="isAuth('shangjia','私聊')" type="success"
                                       @click="chatClick(scope.row)">
                                <span class="icon iconfont "
                                      :style='{"margin":"0 2px","fontSize":"14px","color":"#fff","height":"40px"}'></span>
                                私聊
                            </el-button>


                            <el-button class="del" v-if="isAuth('shangjia','删除') " type="primary"
                                       @click="deleteHandler(scope.row.id )">
                                <span class="icon iconfont "
                                      :style='{"margin":"0 2px","fontSize":"14px","color":"#fff","height":"40px"}'></span>
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-pagination
                    @size-change="sizeChangeHandle"
                    @current-change="currentChangeHandle"
                    :current-page="pageIndex"
                    background
                    :page-sizes="[10, 50, 100, 200]"
                    :page-size="pageSize"
                    :layout="layouts.join()"
                    :total="totalPage"
                    prev-text="< "
                    next-text="> "
                    :hide-on-single-page="true"
                    :style='{"padding":"0","margin":"20px 0 0","whiteSpace":"nowrap","color":"#333","textAlign":"center","width":"100%","fontWeight":"500"}'
            ></el-pagination>
        </template>

        <!-- 添加/修改页面  将父组件的search方法传递给子组件-->
        <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>


        <el-dialog :visible.sync="chatVisible" @close="clearChat" :title="nowname" :append-to-body="true">
            <div class="chat-content" id="chat-content">
                <div v-bind:key="item.id" v-for="item in chatList">
                    <div v-if="item.uid==myid" class="right-content">
                        <el-alert v-if="item.format==1" class="text-content" :title="item.content" :closable="false"
                                  type="warning"></el-alert>
                        <el-image v-else fit="cover" :src="item.content?$base.url + item.content:''"
                                  style="width: 100px;height: 100px;"
                                  :preview-src-list="[item.content?$base.url + item.content:'']"></el-image>
                        <img :src="avatar?$base.url + avatar:require('@/assets/img/avator.png')" alt=""
                             style="width: 30px;border-radius: 50%;height: 30px;margin: 0 0 0 10px;"/>
                    </div>
                    <div v-else class="left-content">
                        <img :src="nowfpic?$base.url + nowfpic:require('@/assets/img/avator.png')" alt=""
                             style="width: 30px;border-radius: 50%;height: 30px;margin: 0 10px 0 0;"/>
                        <el-alert v-if="item.format==1" class="text-content" :title="item.content" :closable="false"
                                  type="success"></el-alert>
                        <el-image v-else fit="cover" :src="item.content?$base.url + item.content:''"
                                  style="width: 100px;height: 100px;"
                                  :preview-src-list="[item.content?$base.url + item.content:'']"></el-image>
                    </div>
                    <div class="clear-float"></div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-input @keydown.enter.native="addChat" v-model="chatForm.content" placeholder="请输入内容"
                          style="width: calc(100% - 180px);float: left;">
                </el-input>
                <el-button :disabled="chatForm.content?false:true" type="primary" @click="addChat">发送</el-button>
                <el-upload style="display: inline-block;margin: 0 0 0 6px;" class="upload-demo" :action="uploadUrl"
                           :on-success="uploadSuccess" :show-file-list="false">
                    <el-button type="success">上传图片</el-button>
                </el-upload>
            </div>
        </el-dialog>
        <el-dialog title="预览图" :visible.sync="previewVisible" width="50%">
            <img :src="previewImg" alt="" style="width: 100%;">
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios'
import AddOrUpdate from "./add-or-update";

export default {
    data() {
        return {
            searchForm: {
                key: ""
            },
            form: {},
            dataList: [],
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            dataListLoading: false,
            dataListSelections: [],
            showFlag: true,
            addOrUpdateFlag: false,
            layouts: ["total", "prev", "pager", "next", "sizes", "jumper"],
            chatVisible: false,
            nowfid: 0,
            nowfpic: '',
            nowname: '',
            chatList: [],
            chatForm: {
                content: ''
            },
            chatTimer: null,
            uploadUrl: this.$base.url + 'file/upload',
            previewImg: '',
            previewVisible: false,
        };
    },
    created() {
        this.init();
        this.getDataList();
        this.contentStyleChange()
    },
    mounted() {
    },
    filters: {
        htmlfilter: function (val) {
            return val.replace(/<[^>]*>/g).replace(/undefined/g, '');
        }
    },
    computed: {
        tablename() {
            return this.$storage.get('sessionTable')
        },
        avatar() {
            return this.$storage.get('headportrait') ? this.$storage.get('headportrait') : ''
        },
        myid() {
            return this.$storage.get('userid') ? this.$storage.get('userid') : ''
        },
    },
    components: {
        AddOrUpdate,
    },
    methods: {
        imgPreView(url) {
            this.previewImg = url
            this.previewVisible = true
        },
        chatClick(row) {
            if (row.id == this.myid) {
                this.$message.error('不能给自己发消息！')
                return false
            }
            this.nowfid = row.id
            if (row.touxiang) {
                this.nowfpic = row.touxiang.split(',')[0]
            } else if (row.headportrait) {
                this.nowfpic = row.headportrait.split(',')[0]
            }
            if (row.shangjiazhanghao) {
                this.nowname = row.shangjiazhanghao
            }
            this.getChatList()
            this.chatVisible = true
        },
        getChatList() {
            this.$http.get('chatmessage/mlist', {
                params: {
                    page: 1,
                    limit: 1000,
                    uid: this.myid,
                    fid: this.nowfid
                }
            }).then(res => {
                if (res.data && res.data.code == 0) {
                    this.chatList = res.data.data.list
                    let div = document.getElementsByClassName('chat-content')[0]
                    setTimeout(() => {
                        if (div)
                            div.scrollTop = div.scrollHeight
                    }, 0)
                    this.chatTimer = setTimeout(() => {
                        this.getChatList()
                    }, 5000)
                }
            })
        },
        clearChat() {
            clearTimeout(this.chatTimer)
            this.chatList = []
            this.getRecordList()
        },
        uploadSuccess(res) {
            if (res.code == 0) {
                clearTimeout(this.chatTimer)
                this.$http.get('friend/page', {
                    params: {
                        uid: this.myid,
                        fid: this.nowfid,
                    }
                }).then(obj => {
                    if (obj.data && obj.data.code == 0) {
                        if (!obj.data.data.list.length) {
                            this.$http.post('friend/add', {
                                uid: this.myid,
                                fid: this.nowfid,
                                name: this.nowname,
                                picture: this.nowfpic,
                                type: 2,
                                tablename: 'yisheng',
                            }).then(res => {
                                this.$http.post('friend/add', {
                                    uid: this.nowfid,
                                    fid: this.myid,
                                    type: 2,
                                    tablename: this.$storage.get('sessionTable'),
                                    name: this.$storage.get('adminName'),
                                    picture: this.avatar,
                                }).then(res1 => {

                                })
                            })
                        }
                        this.$http.post('chatmessage/add', {
                            uid: this.myid,
                            fid: this.nowfid,
                            content: 'upload/' + res.file,
                            format: 2
                        }).then(res2 => {
                            this.chatForm = {
                                content: ''
                            }
                            this.getChatList()
                        })
                    }
                })
            }
        },
        addChat() {
            clearTimeout(this.chatTimer)
            this.$http.get('friend/page', {
                params: {
                    uid: this.myid,
                    fid: this.nowfid,
                }
            }).then(obj => {
                if (obj.data && obj.data.code == 0) {
                    if (!obj.data.data.list.length) {
                        this.$http.post('friend/add', {
                            uid: this.myid,
                            fid: this.nowfid,
                            name: this.nowname,
                            picture: this.nowfpic,
                            type: 2,
                            tablename: 'yisheng',
                        }).then(res => {
                            this.$http.post('friend/add', {
                                uid: this.nowfid,
                                fid: this.myid,
                                type: 2,
                                tablename: this.$storage.get('sessionTable'),
                                name: this.$storage.get('adminName'),
                                picture: this.avatar,
                            }).then(res1 => {

                            })
                        })
                    }
                    this.$http.post('chatmessage/add', {
                        uid: this.myid,
                        fid: this.nowfid,
                        content: this.chatForm.content,
                        format: 1
                    }).then(res2 => {
                        this.chatForm = {
                            content: ''
                        }
                        this.getChatList()
                    })
                }
            })
        },
        contentStyleChange() {
            this.contentPageStyleChange()
        },
        // 分页
        contentPageStyleChange() {
            let arr = []

            // if(this.contents.pageTotal) arr.push('total')
            // if(this.contents.pageSizes) arr.push('sizes')
            // if(this.contents.pagePrevNext){
            //   arr.push('prev')
            //   if(this.contents.pagePager) arr.push('pager')
            //   arr.push('next')
            // }
            // if(this.contents.pageJumper) arr.push('jumper')
            // this.layouts = arr.join()
            // this.contents.pageEachNum = 10
        },


        init() {
        },
        search() {
            this.pageIndex = 1;
            this.getDataList();
        },

        // 获取数据列表
        getDataList() {
            this.dataListLoading = true;
            let params = {
                page: this.pageIndex,
                limit: this.pageSize,
                sort: 'id',
                order: 'desc',
            }
            if (this.searchForm.shangjiazhanghao != '' && this.searchForm.shangjiazhanghao != undefined) {
                params['shangjiazhanghao'] = '%' + this.searchForm.shangjiazhanghao + '%'
            }
            if (this.searchForm.shangjiadizhi != '' && this.searchForm.shangjiadizhi != undefined) {
                params['shangjiadizhi'] = '%' + this.searchForm.shangjiadizhi + '%'
            }
            let user = JSON.parse(this.$storage.getObj('userForm'))
            console.log(user)
            this.$http({
                url: "shangjia/page",
                method: "get",
                params: params
            }).then(({data}) => {
                if (data && data.code === 0) {
                    this.dataList = data.data.list;
                    this.totalPage = data.data.total;
                } else {
                    this.dataList = [];
                    this.totalPage = 0;
                }
                this.dataListLoading = false;
            });
        },
        // 每页数
        sizeChangeHandle(val) {
            this.pageSize = val;
            this.pageIndex = 1;
            this.getDataList();
        },
        // 当前页
        currentChangeHandle(val) {
            this.pageIndex = val;
            this.getDataList();
        },
        // 多选
        selectionChangeHandler(val) {
            this.dataListSelections = val;
        },
        // 添加/修改
        addOrUpdateHandler(id, type) {
            this.showFlag = false;
            this.addOrUpdateFlag = true;
            this.crossAddOrUpdateFlag = false;
            if (type != 'info') {
                type = 'else';
            }
            this.$nextTick(() => {
                this.$refs.addOrUpdate.init(id, type);
            });
        },
        // 下载
        download(file) {
            let arr = file.replace(new RegExp('upload/', "g"), "")
            axios.get(this.$base.url + 'file/download?fileName=' + arr, {
                headers: {
                    token: this.$storage.get('Token')
                },
                responseType: "blob"
            }).then(({
                         data
                     }) => {
                const binaryData = [];
                binaryData.push(data);
                const objectUrl = window.URL.createObjectURL(new Blob(binaryData, {
                    type: 'application/pdf;chartset=UTF-8'
                }))
                const a = document.createElement('a')
                a.href = objectUrl
                a.download = arr
                // a.click()
                // 下面这个写法兼容火狐
                a.dispatchEvent(new MouseEvent('click', {
                    bubbles: true,
                    cancelable: true,
                    view: window
                }))
                window.URL.revokeObjectURL(data)
            }, err => {
                axios.get((location.href.split(this.$base.name).length > 1 ? location.href.split(this.$base.name)[0] : '') + this.$base.name + '/file/download?fileName=' + arr, {
                    headers: {
                        token: this.$storage.get('Token')
                    },
                    responseType: "blob"
                }).then(({
                             data
                         }) => {
                    const binaryData = [];
                    binaryData.push(data);
                    const objectUrl = window.URL.createObjectURL(new Blob(binaryData, {
                        type: 'application/pdf;chartset=UTF-8'
                    }))
                    const a = document.createElement('a')
                    a.href = objectUrl
                    a.download = arr
                    // a.click()
                    // 下面这个写法兼容火狐
                    a.dispatchEvent(new MouseEvent('click', {
                        bubbles: true,
                        cancelable: true,
                        view: window
                    }))
                    window.URL.revokeObjectURL(data)
                })
            })
        },
        // 预览
        preClick(file) {
            if (!file) {
                return false
            }
            window.open((location.href.split(this.$base.name).length > 1 ? location.href.split(this.$base.name)[0] + this.$base.name + '/' + file : this.$base.url + file))
        },
        shangjiastatusChange(e, row) {
            if (row.status == 0) {
                row.passwordwrongnum = 0
            }
            this.$http({
                url: 'shangjia/update',
                method: 'post',
                data: row
            }).then(res => {
                if (row.status == 1) {
                    this.$message.error('该用户已锁定')
                } else {
                    this.$message.success('该用户已解除锁定')
                }
            })
        },
        // 删除
        async deleteHandler(id) {
            var ids = id ? [Number(id)] : this.dataListSelections.map(item => {
                return Number(item.id);
            });
            await this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(async () => {
                await this.$http({
                    url: "shangjia/delete",
                    method: "post",
                    data: ids
                }).then(async ({data}) => {
                    if (data && data.code === 0) {
                        this.$message({
                            message: "操作成功",
                            type: "success",
                            duration: 1500,
                            onClose: () => {
                                this.search();
                            }
                        });

                    } else {
                        this.$message.error(data.msg);
                    }
                });
            });
        },


    }

};
</script>
<style lang="scss" scoped>

.center-form-pv {
  .el-date-editor.el-input {
    width: auto;
  }
}

.el-input {
  width: auto;
}

// form
.center-form-pv .el-input /deep/ .el-input__inner {
  border: 1;
  border-radius: 4px;
  padding: 0 12px;
  outline: none;
  color: #333;
  width: 170px;
  font-size: 14px;
  height: 40px;
}

.center-form-pv .el-select /deep/ .el-input__inner {
  border: 1;
  border-radius: 4px;
  padding: 0 10px;
  outline: none;
  color: #333;
  width: 170px;
  font-size: 14px;
  height: 40px;
}

.center-form-pv .el-date-editor /deep/ .el-input__inner {
  border: 1;
  border-radius: 4px;
  padding: 0 10px 0 30px;
  outline: none;
  color: #333;
  width: 170px;
  font-size: 14px;
  height: 40px;
}

.center-form-pv .search {
  border: 0;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 24px;
  outline: none;
  color: #fff;
  background: rgba(111, 125, 255, 0.9);
  width: auto;
  font-size: 14px;
  height: 40px;
}

.center-form-pv .search:hover {
  opacity: 0.8;
}

.center-form-pv .actions .add {
  border: 0;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 14px;
  margin: 4px;
  outline: none;
  color: #fff;
  background: rgba(111, 125, 255, 0.9);
  width: auto;
  font-size: 14px;
  height: 40px;
}

.center-form-pv .actions .add:hover {
  opacity: 0.8;
}

.center-form-pv .actions .del {
  border: 0;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 14px;
  margin: 4px;
  outline: none;
  color: #fff;
  background: rgba(111, 125, 255, 0.9);
  width: auto;
  font-size: 14px;
  height: 40px;
}

.center-form-pv .actions .del:hover {
  opacity: 0.8;
}

.center-form-pv .actions .statis {
  border: 0;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 14px;
  margin: 4px;
  outline: none;
  color: #fff;
  background: rgba(111, 125, 255, 0.9);
  width: auto;
  font-size: 14px;
  height: 40px;
}

.center-form-pv .actions .statis:hover {
  opacity: 0.8;
}

.center-form-pv .actions .btn18 {
  border: 0;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 14px;
  margin: 4px;
  outline: none;
  color: #fff;
  background: rgba(111, 125, 255, 0.9);
  width: auto;
  font-size: 14px;
  height: 40px;
}

.center-form-pv .actions .btn18:hover {
  opacity: 0.8;
}

// table
.el-table /deep/ .el-table__header-wrapper thead {
  color: #999;
  font-weight: 500;
  width: 100%;
}

.el-table /deep/ .el-table__header-wrapper thead tr {
  background: #fff;
}

.el-table /deep/ .el-table__header-wrapper thead tr th {
  padding: 12px 0;
  border-color: #eee;
  border-width: 0 0 1px 0;
  border-style: solid;
  text-align: left;
}

.el-table /deep/ .el-table__header-wrapper thead tr th .cell {
  padding: 0 10px;
  word-wrap: normal;
  word-break: break-all;
  white-space: normal;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  line-height: 24px;
  position: relative;
  text-overflow: ellipsis;
}


.el-table /deep/ .el-table__body-wrapper tbody {
  width: 100%;
}

.el-table /deep/ .el-table__body-wrapper tbody tr {
  background: #fff;
}

.el-table /deep/ .el-table__body-wrapper tbody tr td {
  padding: 12px 0;
  color: #999;
  background: #fff;
  border-color: #eee;
  border-width: 0 0 1px 0;
  border-style: solid;
  text-align: left;
}


.el-table /deep/ .el-table__body-wrapper tbody tr:hover td {
  padding: 12px 0;
  color: #fff;
  background: rgba(111, 125, 255, 0.2);
  border-color: #eee;
  border-width: 0;
  border-style: solid;
  text-align: left;
}

.el-table /deep/ .el-table__body-wrapper tbody tr td {
  padding: 12px 0;
  color: #999;
  background: #fff;
  border-color: #eee;
  border-width: 0 0 1px 0;
  border-style: solid;
  text-align: left;
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .cell {
  padding: 0 10px;
  overflow: hidden;
  word-break: break-all;
  white-space: normal;
  line-height: 24px;
  text-overflow: ellipsis;
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .view {
  border: 0;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 24px;
  margin: 4px;
  outline: none;
  color: #fff;
  background: rgba(111, 125, 255, 0.9);
  width: auto;
  font-size: 14px;
  height: 32px;
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .view:hover {
  opacity: 0.8;
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .add {
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .add:hover {
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .edit {
  border: 0;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 24px;
  margin: 4px;
  outline: none;
  color: #fff;
  background: rgba(111, 125, 255, 0.9);
  width: auto;
  font-size: 14px;
  height: 32px;
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .edit:hover {
  opacity: 0.8;
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .del {
  border: 0;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 24px;
  margin: 4px;
  outline: none;
  color: #fff;
  background: rgba(111, 125, 255, 0.9);
  width: auto;
  font-size: 14px;
  height: 32px;
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .del:hover {
  opacity: 0.8;
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .btn8 {
  border: 0;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 24px;
  margin: 4px;
  outline: none;
  color: #fff;
  background: rgba(111, 125, 255, 0.9);
  width: auto;
  font-size: 14px;
  height: 32px;
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .btn8:hover {
  opacity: 0.8;
}

// pagination
.main-content .el-pagination /deep/ .el-pagination__total {
  margin: 0 10px 0 0;
  color: #666;
  font-weight: 400;
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  line-height: 28px;
  height: 28px;
}

.main-content .el-pagination /deep/ .btn-prev {
  border: none;
  border-radius: 2px;
  padding: 0;
  margin: 0 5px;
  color: #666;
  background: #f4f4f5;
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  line-height: 28px;
  min-width: 35px;
  height: 28px;
}

.main-content .el-pagination /deep/ .btn-next {
  border: none;
  border-radius: 2px;
  padding: 0;
  margin: 0 5px;
  color: #666;
  background: #f4f4f5;
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  line-height: 28px;
  min-width: 35px;
  height: 28px;
}

.main-content .el-pagination /deep/ .btn-prev:disabled {
  border: none;
  cursor: not-allowed;
  border-radius: 2px;
  padding: 0;
  margin: 0 5px;
  color: #C0C4CC;
  background: #f4f4f5;
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  line-height: 28px;
  height: 28px;
}

.main-content .el-pagination /deep/ .btn-next:disabled {
  border: none;
  cursor: not-allowed;
  border-radius: 2px;
  padding: 0;
  margin: 0 5px;
  color: #C0C4CC;
  background: #f4f4f5;
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  line-height: 28px;
  height: 28px;
}

.main-content .el-pagination /deep/ .el-pager {
  padding: 0;
  margin: 0;
  display: inline-block;
  vertical-align: top;
}

.main-content .el-pagination /deep/ .el-pager .number {
  cursor: pointer;
  padding: 0 4px;
  margin: 0 5px;
  color: #666;
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  line-height: 28px;
  border-radius: 2px;
  background: #f4f4f5;
  text-align: center;
  min-width: 30px;
  height: 28px;
}

.main-content .el-pagination /deep/ .el-pager .number:hover {
  cursor: pointer;
  padding: 0 4px;
  margin: 0 5px;
  color: #409EFF;
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  line-height: 28px;
  border-radius: 2px;
  background: #f4f4f5;
  text-align: center;
  min-width: 30px;
  height: 28px;
}

.main-content .el-pagination /deep/ .el-pager .number.active {
  cursor: default;
  padding: 0 4px;
  margin: 0 5px;
  color: #FFF;
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  line-height: 28px;
  border-radius: 2px;
  background: rgba(111, 125, 255, 0.9);
  text-align: center;
  min-width: 30px;
  height: 28px;
}

.main-content .el-pagination /deep/ .el-pagination__sizes {
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  line-height: 28px;
  height: 28px;
}

.main-content .el-pagination /deep/ .el-pagination__sizes .el-input {
  margin: 0 5px;
  width: 100px;
  position: relative;
}

.main-content .el-pagination /deep/ .el-pagination__sizes .el-input .el-input__inner {
  border: 1px solid #DCDFE6;
  cursor: pointer;
  padding: 0 25px 0 8px;
  color: #606266;
  display: inline-block;
  font-size: 13px;
  line-height: 28px;
  border-radius: 3px;
  outline: 0;
  background: #FFF;
  width: 100%;
  text-align: center;
  height: 28px;
}

.main-content .el-pagination /deep/ .el-pagination__sizes .el-input span.el-input__suffix {
  top: 0;
  position: absolute;
  right: 0;
  height: 100%;
}

.main-content .el-pagination /deep/ .el-pagination__sizes .el-input .el-input__suffix .el-select__caret {
  cursor: pointer;
  color: #C0C4CC;
  width: 25px;
  font-size: 14px;
  line-height: 28px;
  text-align: center;
}

.main-content .el-pagination /deep/ .el-pagination__jump {
  margin: 0 0 0 24px;
  color: #606266;
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  line-height: 28px;
  height: 28px;
}

.main-content .el-pagination /deep/ .el-pagination__jump .el-input {
  border-radius: 3px;
  padding: 0 2px;
  margin: 0 2px;
  display: inline-block;
  width: 50px;
  font-size: 14px;
  line-height: 18px;
  position: relative;
  text-align: center;
  height: 28px;
}

.main-content .el-pagination /deep/ .el-pagination__jump .el-input .el-input__inner {
  border: 1px solid #DCDFE6;
  cursor: pointer;
  padding: 0 3px;
  color: #606266;
  display: inline-block;
  font-size: 14px;
  line-height: 28px;
  border-radius: 3px;
  outline: 0;
  background: #FFF;
  width: 100%;
  text-align: center;
  height: 28px;
}

// list one
.one .list1-view {
  border: 0;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 15px;
  margin: 0;
  outline: none;
  color: #fff;
  background: rgb(103, 194, 58);
  width: auto;
  font-size: 14px;
  height: 40px;
}

.one .list1-view:hover {
  opacity: 0.8;
}

.one .list1-edit {
  border: 0;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 15px;
  margin: 0;
  outline: none;
  color: #fff;
  background: #409eff;
  width: auto;
  font-size: 14px;
  height: 40px;
}

.one .list1-edit:hover {
  opacity: 0.8;
}

.one .list1-del {
  border: 0;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 15px;
  margin: 0;
  outline: none;
  color: #fff;
  background: rgba(255, 0, 0, 1);
  width: auto;
  font-size: 14px;
  height: 40px;
}

.one .list1-del:hover {
  opacity: 0.8;
}

.one .list1-btn8 {
  border: 0;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 24px;
  margin: 4px;
  outline: none;
  color: #fff;
  background: rgba(255, 128, 0, 1);
  width: auto;
  font-size: 14px;
  height: 40px;
}

.one .list1-btn8:hover {
  opacity: 0.8;
}

.main-content .el-table .el-switch {
  display: inline-flex;
  vertical-align: middle;
  line-height: 30px;
  position: relative;
  align-items: center;
  height: 30px;
}

.main-content .el-table .el-switch /deep/ .el-switch__label--left {
  cursor: pointer;
  margin: 0 10px 0 0;
  color: #333;
  font-weight: 500;
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  transition: .2s;
  height: 30px;
}

.main-content .el-table .el-switch /deep/ .el-switch__label--right {
  cursor: pointer;
  margin: 0 0 0 10px;
  color: #333;
  font-weight: 500;
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  transition: .2s;
  height: 30px;
}

.main-content .el-table .el-switch /deep/ .el-switch__core {
  border: 1px solid #0000ff;
  cursor: pointer;
  border-radius: 15px;
  margin: 0;
  outline: 0;
  background: #0000ff;
  display: inline-block;
  width: 60px;
  box-sizing: border-box;
  transition: border-color .3s, background-color .3s;
  height: 30px;
}

.main-content .el-table .el-switch /deep/ .el-switch__core::after {
  border-radius: 100%;
  top: 1px;
  left: 1px;
  background: #FFF;
  width: 26px;
  position: absolute;
  transition: all .3s;
  height: 26px;
}

.main-content .el-table .el-switch.is-checked /deep/ .el-switch__core::after {
  margin: 0 0 0 -27px;
  left: 100%;
}

.main-content .el-table .el-rate /deep/ .el-rate__item {
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  font-size: 0;
  position: relative;
}

.main-content .el-table .el-rate /deep/ .el-rate__item .el-rate__icon {
  margin: 0 3px;
  display: inline-block;
  font-size: 18px;
  position: relative;
  transition: .3s;
}

.section-content {
  cursor: pointer;
  padding: 20px;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
  margin: 0 0 20px;
  color: #333;
  background: #fff;
  display: flex;
  width: 100%;
  border-color: #efefef;
  border-width: 0;
  align-items: center;
  border-style: solid;
  position: relative;
}

.section-content:hover {
  color: #fff;
  background: #DF847F10;
}

.chat-content {
  padding-bottom: 20px;
  width: 100%;
  margin-bottom: 10px;
  max-height: 300px;
  height: 300px;
  overflow-y: scroll;
  border: 1px solid #eeeeee;
  background: #fff;

  .left-content {
    float: left;
    margin-bottom: 10px;
    padding: 10px;
    max-width: 80%;
    display: flex;
    align-items: center;
  }

  .right-content {
    float: right;
    margin-bottom: 10px;
    padding: 10px;
    max-width: 80%;
    display: flex;
    align-items: center;
  }
}

.clear-float {
  clear: both;
}

.noList {
  color: #9e9e9e;
  width: 100%;
  text-align: center;
  padding: 60px 0;
}
</style>
